<template>
	<!-- 活动修改 -->
	<view class="poem" v-if="actList">
		
		<form @submit.stop="formSubmit" @reset="">
			<input type="text" hidden name="actid" :value="actid"  maxlength="-1"/>
			<input type="text" hidden name="type" :value="type"  maxlength="-1"/>
			<input type="text" hidden name="start_at" :value="startTime"  maxlength="-1"/>
			<input type="text" hidden name="end_at" :value="endTime"  maxlength="-1"/>	
			<input type="text" hidden name="images" :value="images"  maxlength="-1"/>
			<input type="text" hidden name="activable_id" :value="cirid"  maxlength="-1"/>
			<input type="text" hidden name="location" :value="JSON.stringify(location)"  maxlength="-1"/>
			<view class="upload-images-area">
				<!-- 展示封面 -->
				<view class="images-area" >
					<view class="image-item" v-if="images" v-for="(image,index) in images" :key="index"  @tap="chooseImages(index)" :data-url="images" >
						<image :src="image" mode="aspectFill"></image>
						<view class="delete-icon" @tap.stop="delImg" :data-index="index">
							<image src="/static/images/post/delete-image.svg" mode=""></image>
						</view>
						<view class="up-cover-desc">替换封面</view>
					</view>
					<!-- 上传封面 -->
					<view class="upload" @tap="chooseImages(-1)" v-if=" 9 > images.length">
						<image src="/static/images/post/upimage.svg" mode=""></image>
						<view class="up-cover-desc">上传封面</view>
					</view>
				</view>
			</view>
			<view class="p-title">
				<view class="title-tip">活动标题</view>
				<input type="text" name="title" :value="actList.title" placeholder="来个标题好吗" class="cirname" maxlength="15"/>
			</view>
			<view class="intro">
				<view class="cir-desc">活动内容</view>
				<textarea placeholder="请输入活动内容~" class="cir-textarea" cols="30" rows="30" maxlength="120"  name="intro"  v-model="val">
				</textarea>
				<view class="count">
					<p :class="{'remnant':remnant!=0,'zero':remnant==120}">{{remnant}}</p>
					<view class="">/120</view>
				</view>
			</view>
			<view class="time">
				<view class="t-desc">
					设置活动起止时间
				</view>
				<view class="content" >
					<test-com beginYear="2020" endYear="2070"  :selectTime="startTime" @confirm="startOnConfirm"></test-com>
					<view class="contact">
						—
					</view>
					<test-com beginYear="2020" endYear="2070" :selectTime="endTime" @confirm="endOnConfirm"></test-com>
				</view>
			</view>
			<view class="p-title">
				<view class="title-tip">联系人</view>
				<input type="text" name="contact_name" :value="contact_name" placeholder="请输入联系姓名" class="cirname" maxlength="20"/>
			</view>
			<view class="p-title">
				<view class="title-tip">联系号码</view>
				<input type="text" name="phone" :value="phone" placeholder="请输入联系号码" class="cirname" maxlength="20"/>
			</view>
			<view class="p-title" v-if="actList.type == '线下'">
				<view class="title-tip">最大参加人数</view>
				<input type="text" name="max_people" :value="max_people" placeholder="请输入最大参加人数" class="cirname" maxlength="20"/>
			</view>
			<view class="p-title addre_flex" v-if="actList.type == '线下'" @tap="chooseLocation">
				<view class="title-tip">详细地址：</view>
				<view class="name" v-if="location[0].name">{{location[0].name}}</view>
				<view class="tip" v-else>点击右侧图标选择地址</view>
				<image src="/static/images/icon/location.png" mode=""></image>
			</view>
			<button class="report" form-type="submit">保存</button>
		</form>
	</view>
	<!-- 活动修改 -->
</template>

<script>
	import api from '../../../common/api.js'
	import dateUtils from '../../../common/utils/dateUtils.js'
	import graceChecker from '../../../common/graceChecker.js'
	import testCom from '../../../components/content/test_com.vue'
	export default {
		data() {
			return {
				upload_api: this.uploadApi ,//图片上传url
				actList:{},			//活动数据
				activeTab:0,		//当前点击tab_id
				ispost:1,				//用于判断是否重复提交
				images:[],			//活动封面图
				type:'',				//活动类型
				actid:'',				//活动id
				cirid:'',   		//圈子id
				val: "",    		//简介字数
				paragcourt:"" ,	//段落内容字数
				contact_name:'',//活动联系人
				phone:'',				//活动联系号码
				startTime:'',		//活动开始时间
				endTime:'',			//活动结束时间
				max_people:'',	//参加活动最大人数
				location:[{			//线下选择位置
					name:'',
					address:'',
					latitude:'',
					longitude:''
				}],
			}
		},
		components:{
			testCom
		},
		computed: {
			remnant(e) {//实时记录输入字数
				return  this.val.length;
			},
			paragraph(value) {
				console.log(value);
				return function(value) {
				return this.value.length
				}
			}
	
		},
		async onLoad(p) {
			this.actid = p.actid
			this.actList = await api.GetActDetail(this.actid)
			this.type = this.actList.type
			this.val = this.actList.intro
			this.startTime = this.actList.start_at
			this.endTime = this.actList.end_at
			this.cirid = this.actList.activable_id
			this.images = this.actList.images
			this.contact_name = this.actList.contact_person
			this.phone = this.actList.contact_number
			this.max_people = this.actList.max_people
			this.location = this.actList.location
		},
		
		methods:{
			
			startOnConfirm(val) {//确认活动开始时间
				console.log(val);
				this.startTime = val.selectRes
				console.log(this.startTime)
			},
			
			endOnConfirm(vals) {//确认活动结束时间
				this.endTime = vals.selectRes
				console.log(this.endTime)
			},
			
			chooseLocation() {//选择线下活动位置
				uni.chooseLocation({
					success: res => {
						this.location[0].name = res.name
						this.location[0].address= res.address
						this.location[0].latitude = res.latitude
						this.location[0].longitude = res.longitude
						console.log(this.location);
					},
					fail: () => {
							uni.getSetting({
								success: function(res) {
									var statu = res.authSetting;
									console.log(statu);
									if (!statu['scope.userLocation']) {
										console.log(123);
										uni.showModal({
											title: '是否授权当前位置',
											content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
											success(tip) {
												if (tip.confirm) {
													uni.openSetting({
														success: function(data) {
															if (data.authSetting["scope.userLocation"] === true) {
																uni.showToast({
																	title: '授权成功',
																	icon: 'success',
																	duration: 1000
																})
																//授权成功之后，再调用chooseLocation api选择地方
																setTimeout(function() {
																	uni.chooseLocation({
																		success: (res) => {
																			this.location[0].name = res.name
																			this.location[0].address= res.address
																			this.location[0].latitude = res.latitude
																			this.location[0].longitude = res.longitude
																		}
																	})
																}, 1000)
															}
														}
													})
												} else {
													uni.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000
													})
												}
											}
										})
					 
									}
								}
							})
						}
				});
			},
			
			// 活动内容修改操作
			async formSubmit(e) {//表单提交
				if(!this.ispost) {
					uni.showToast({ title: '勿重复提交 ', icon: "none" });
					return 
				}
				var {actid,type,title,intro,start_at,end_at,activable_id,images,type,max_people,phone,contact_name,location} = e.detail.value
				var rule = [
					{name:"images", checkType : "notnull", errorMsg:"请上传活动封面"},
					{name:"title", checkType : "notnull", errorMsg:"请填写活动标题内容"},
					{name:"intro", checkType : "notnull", errorMsg:"请填写活动描述内容"},
					{name:"start_at", checkType : "notnull", errorMsg:"请填写活动开始时间"},
					{name:"end_at", checkType : "notnull", errorMsg:"请填写活动结束时间"},
					{name:"contact_name", checkType : "notnull", checkRule:"0,", errorMsg:"姓名不能为空"},
					{name:"phone", checkType : "phoneno", errorMsg:"请输入正确的联系号码"},
				];
				if(this.actList.type == '线上') {
					max_people = ''
					location = ''
				}else if(this.actList.type == '线下') {
					rule.push({name:"max_people", checkType : "int", errorMsg:"请输入正确的参加人数"})
				}
				//进行表单检查
				var checkRes = graceChecker.check(e.detail.value, rule);
				if(!checkRes){
					uni.showToast({ title: graceChecker.error, icon: "none" });
					return 
				}
				// 验证时间
				var timestamp = (new Date()).getTime() ; //获取当前系统时间戳 / 1000---秒数
				console.log('当前时间',timestamp);
				console.log('结束时间',dateUtils.datetotime(end_at) - 900000);
				if( dateUtils.datetotime(end_at) - 900000 <= timestamp) {
					uni.showToast({
						title:'活动结束时间需大于当前时间15分钟以上',
						icon:'none'
					})
					return 
				}else if(dateUtils.datetotime(start_at) >= dateUtils.datetotime(end_at)) {
					uni.showToast({
						title:'活动结束时间需大于开始时间',
						icon:'none'
					})
					return 
				}
				if(type == '线下') {
					let jlocation = JSON.parse(location)
					for(var item of jlocation) {
						console.log('地址+++++++++++++++',item);
						if(item.name == '') {
							uni.showToast({ title: '位置信息不能为空 ', icon: "none" });
							return
						}
					}
				}
				
				this.ispost = 0 
				uni.showLoading({
					title:'提交中'
				});
				var res = await api.EditActivity(actid,type,title,intro,start_at,end_at,activable_id,images,contact_name,phone,max_people,location)
				console.log(res);
				if(res.err == 0)  {
					uni.showToast({
						title:res.msg
					})
					setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					},700)
				}
				uni.hideLoading()
			},
			
			viewImage(e) {//预览图片
				uni.previewImage({
					urls: [this.images],
					current: e.currentTarget.dataset.url
				});
			},
			
			delImg(e) {//删除图片
				this.images.splice(e.currentTarget.dataset.index, 1)
			},
			
			chooseImages(index1) {//上传相集images
				var _self = this
				console.log('========',_self.images);
				uni.chooseImage({
					count:1,//默认1
					sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有 'original', 'compressed'
					sourceType: ['album','camera'],  //从相册选择或者拍照 'album','camera'
					success: (res) => {
						console.log(res);
						res.tempFilePaths.forEach((item,index)=>{
							uni.showLoading({title:"上传中"});
							var uploadTask = uni.uploadFile({
								url: _self.upload_api,
								// url:'http://bbtest.test/api/upload',
								filePath: item,
								fileType: 'image',
								name: 'file',
								dataType: 'json',
								success: function (uploadFileRes) {
									// 上传成功后返回服务器端保存的路径
									var jsondata = JSON.parse(uploadFileRes.data)
									if( jsondata.err ==0 ){
										if(index1 === -1) {
											_self.images.push(jsondata.file_path)
											console.log('插入');
										}else {
											_self.images.splice(index1,index1,jsondata.file_path) 
										}
										uni.hideLoading();
										uni.showToast({
											title: jsondata.msg,
											duration:800
										})
									}else{
											uni.showToast({
												title:jsondata.msg,
												icon:'none'
											})
										}
									}
							 });
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.getnumber {
	height: 300rpx;
	height: 200rpx;
}
.poem {
	// margin-top: 110rpx;
	padding: 20rpx 30rpx;
	background-color: #fff;
	.p-title{
		padding: 20rpx 0;
		.title-tip {
			margin: 15rpx 10rpx;
		}
		input {
			border: 2rpx solid #F3F6F5;
			margin: 10rpx 0;
			background: rgba(246,247,249,0.9);
			border-radius: 15rpx;
		  padding: 20rpx 30rpx;
		}
		image {
			width: 50rpx;
			height: 55rpx;
		}
	}
}
.addre_flex {
	display: flex;
	align-items: center;
	font-size: 30rpx;
	border-top: 1rpx solid #F3F6F5;
	border-bottom: 1rpx solid #F3F6F5;
	.name,.tip {
		margin: 20rpx 10rpx 10rpx;
		width: 450rpx;
	}
	.tip {
		color: #999999;
	}
}
.paragraph {
	background-color: rgba(226,238,254,.9);
	color: #1472FE;
}
.report {
	background-color: #1a77fe;
	color: #fff;
	margin: 30rpx 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 82rpx;
	border-radius: 10rpx;
}
.paragraph {
	padding: 15rpx 0;
	border-radius: 10rpx;
	padding: 15rpx 0;
	text-align: center;
	margin: 30rpx  80rpx;
	height: 55rpx;
	line-height: 55rpx;
}
.poem-paragraph {
	margin-top: 40rpx;
}
.paragraph {
	background-color: rgba(226,238,254,.9);
	color: #1472FE;
}
.time {
	.t-desc {
		margin: 20rpx 0;
	}
	.content {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
		.contact {
			margin: 0 4rpx ;
		}
	}
}
.intro,.poem-paragraph {
	position: relative;
	font-size: 30rpx;
	background-color: #fff;
	.cir-desc {
		margin: 10rpx;
	}
	.cir-textarea {
		border: 2rpx solid #F3F6F5;
		margin: 10rpx 0;
		background: rgba(246,247,249,0.5);
		border-radius: 15rpx;
		line-height: 34rpx;
	}
	.count {
		display: flex;
		position: absolute;
		right: 20rpx;
		bottom: 25rpx;
		color: #999;
		.remnant {
			color: #999;
		}
		.zero{
			color: #FF0000;
		}
	}
	textarea {
		height: 210rpx;
		width: 650rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}
}
.upload-images-area {
	/* width: 750rpx;
	margin: 0 auto;
	height: 1000rpx; */
	display: flex;
	justify-content: center;
	padding: 10rpx 15rpx;
	
	.images-area {	
		display: flex; 
		flex-wrap: wrap;
		// width: 700rpx;
		box-sizing: border-box;
		.image-item {
			position: relative;
			width: 210rpx;
			height: 200rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			.delete-icon {
					position: absolute;
					right: 5rpx;
					top: 5rpx;
					image {
						width: 45rpx;
						height: 45rpx;
						// background: rgba(0,0,0,.2);
					}
				}
			.up-cover-desc {
				position: absolute;
				width: 210rpx;
				text-align: center;
				// left: 0;
				// right: 0;
				// margin: 0 auto;
				color: #FFFFFF;
				background-color:rgba(122,122,122,.8);
				bottom: 0;
				border-bottom-left-radius: 10rpx;  
				border-bottom-right-radius: 10rpx; 
			}
		}
		.upload {
			display: flex;
			position: relative;
			align-items: center;
			justify-content: center;
			width: 210rpx;
			height: 200rpx;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			// border: 1rpx solid #F3F6F5;
			background: rgba(245,245,245,.8);
			.up-cover-desc {
				position: absolute;
				width: 210rpx;
				text-align: center;
				// left: 0;
				// right: 0;
				// margin: 0 auto;
				color: #FFFFFF;
				background-color:rgba(122,122,122,.8);
				bottom: 0;
				border-bottom-left-radius: 10rpx;  
				border-bottom-right-radius: 10rpx; 
			}
			image {
				width: 60%;
				height: 58%;
			}
		}
	}
}
</style>

